<script setup>
/**
 * & 文件引入区域
 */
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { getItemOrderDetail } from "@/server/api/itemApi";
import { getStoreOrderDetail } from "@/server/api/shopApi";

import { orderStatus } from "@/stores/payStore";
import { ToastFun } from "@/hook/toast";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/**
 * & 注册区
 */

/**
 * & 变量声明区
 */
const router = useRouter();
const route = useRoute();
let orderInfo = ref(); // 支付完成的订单详情

/**
 * & 函数区
 */
// 网店订单（未支付 / 已支付）的详情接口
const getItemOrderDetailFun = async (id) => {
  ToastFun("Loading", { duration: 1000 });
  let { data } = await getStoreOrderDetail(id);

  if (data.code == 200) {
    ToastFun("", {});
    orderInfo.value = data.data;
  } else {
    ToastFun("", {});
  }

  console.log(orderInfo.value);
};

// 实体店订单（未支付 / 已支付）的详情接口
const getShopOrderDetailFun = async (id) => {
  ToastFun("Loading", { duration: 1000 });
  let { data } = await getStoreOrderDetail(id);

  if (data.code == 200) {
    ToastFun("", {});
    orderInfo.value = data.data;
  } else {
    ToastFun("", {});
  }

  orderInfo.value = data.data;
  console.log(orderInfo.value);
};

onMounted(() => {
  let type = orderStatus().payType;

  if (type == "item") {
    getItemOrderDetailFun(route.query.id);
  } else if (type == "shop") {
    getShopOrderDetailFun(route.query.id);
  }
});
</script>

<template>
  <div class="contain" v-if="orderInfo">
    <!-- 导航栏 -->
    <div class="nav">
      <div class="left" @click="$router.push('/')">
        <img src="/images/cart/WhiteBack.png" />
      </div>
      <div class="title">{{ $t("order.successful") }}</div>
    </div>

    <!-- 渐变盒子1 -->
    <div class="Gradientbox1"></div>
    <!-- 渐变盒子2 -->
    <div class="Gradientbox2"></div>

    <!-- 对勾 -->
    <div class="Tick"><img src="/images/cart/Tick.png" /></div>

    <!-- Payment Successful -->
    <div class="PaySuccess">{{ $t("order.successful") }}</div>

    <!-- 占位1 -->
    <div class="Placeholder1"></div>

    <!-- 有border的横杠 -->
    <div class="bar">
      <!-- 支付详情 -->
      <div class="payDetail">
        <div class="shadow"></div>

        <div class="top">
          <span class="pi">eCNY</span>
          <span class="money">
            {{ $route.query.price }}
          </span>
        </div>

        <div class="medium">
          <div class="item">
            <div class="title cut-txt">{{ $t("order.way") }}:</div>
            <div class="text">eCNY</div>
          </div>

          <div class="item">
            <div class="title cut-txt">{{ $t("order.payOrder") }}:</div>
            <div class="text">
              {{ $route.query.id }}
            </div>
          </div>

          <div class="item">
            <div class="title cut-txt">{{ $t("order.time") }}:</div>
            <div class="text">{{ orderInfo.payTime }}</div>
          </div>

          <div class="item">
            <div class="title cut-txt">{{ $t("order.serverTime") }}:</div>
            <div class="text">{{ orderInfo.payTime }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg"></div>
    <div class="back" @click="$router.push('/')">
      {{ $t("order.finish") }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.contain {
  width: 100vw;
  min-height: 100vh;
  background: rgba(100, 46, 142, 1);
  font-family: "PingFang SC";
  overflow-x: hidden;
  position: relative;
}

.nav {
  padding: 20rem 16rem 24rem;
  display: flex;
  align-items: center;

  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;

  background: rgba(100, 46, 142, 1);

  .left {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24rem;
    height: 24rem;
    line-height: 24rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .title {
    height: 28rem;
    margin: 0 16rem;
    font-size: 20rem;
    font-weight: 500;
    line-height: 28rem;
    text-align: center;
    color: rgba(255, 255, 255, 1);
  }
}

.Gradientbox1 {
  width: 128rem;
  height: 113rem;
  background: linear-gradient(45deg,
      rgba(100, 46, 142, 1) 55%,
      #6e3c95 84%,
      white 100%);
  border-radius: 50%;
  position: absolute;
  top: 103rem;
  left: -48rem;
}

.Gradientbox2 {
  width: 61rem;
  height: 48rem;
  background: linear-gradient(320deg,
      rgba(100, 46, 142, 1) 50%,
      #6e3c95 83%,
      white 100%);
  border-radius: 50%;
  position: absolute;
  top: 52rem;
  left: 344rem;
  z-index: 1000;
}

// 对勾
.Tick {
  position: absolute;
  left: 103rem;
  top: 110rem;
  width: 64rem;
  height: 64rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rem 2rem 10rem rgba(12, 2, 20, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 32rem;
    height: 20rem;
  }
}

.PaySuccess {
  width: 104rem;
  height: 56rem;
  font-size: 20rem;
  font-weight: 600;
  line-height: 28rem;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  position: absolute;
  left: 183rem;
  top: 114rem;
}

// 占位
.Placeholder1 {
  height: 214rem;
}

.bg {
  height: 70%;

  border-top-left-radius: 300rem 50rem;
  border-top-right-radius: 300rem 50rem;

  z-index: 80;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  background-color: #f5f5f5;
}

.back {
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  bottom: 20rem;

  margin: 0 16rem;

  border-radius: 8rem;
  background: #642e8eff;
  font-size: 20rem;
  line-height: 50rem;
  text-align: center;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.bar {
  height: 10rem;
  border-radius: 141rem;
  background: rgba(255, 255, 255, 1);
  position: relative;

  margin: 0 16rem;
}

.payDetail {
  margin: 0 16rem;
  position: absolute;
  z-index: 99;

  background-image: url("/images/Home/paySuccess.png");
  background-size: 104%;
  background-repeat: no-repeat;
  background-position: -6rem 0;

  .shadow {
    height: 10rem;
    width: 326rem;
  }

  .top {
    height: 82rem;
    font-weight: 500;
    line-height: 82rem;
    color: rgba(100, 46, 142, 1);

    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;

    .pi {
      margin-top: 8rem;
      font-size: 24rem;
      margin-right: 10rem;
    }

    .money {
      font-size: 36rem;
    }
  }

  .medium {
    width: 100%;
    box-sizing: border-box;

    padding: 16rem 30rem 45rem;

    >.item {
      display: flex;
      align-items: center;
      margin-bottom: 8rem;

      font-size: 16rem;
      font-weight: 400;
      line-height: 22rem;
      color: #666;

      >.title {
        width: 75rem;
      }

      >.text {
        color: #333;
        margin-left: 5rem;
      }
    }
  }
}
</style>
